<template>
  <!-- 村社财务 -->
  <div class="containerPage">
    <!-- <u-navbar title="村社财务" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <!-- 内容 -->
    <div class="content">
      <div class="headSea">
        <div class="time" @click="datetimeShow = !datetimeShow">
          <span>{{ currentDate }}</span>
          <img src="@/static/image/webApp/bott.png" alt="" />
        </div>
        <div class="inputSea">
          <img src="@/static/image/webApp/搜索.png" alt="" />
          <input v-model="financeTitle" type="text" placeholder="请输入关键字" />
          <span class="spanTxt" @click="findFinanceExpenseListAndSizeByReq(true)">搜索</span>
        </div>
      </div>
      <div class="selBox">
        <div class="selTab">
          <div class="tabItem" :class="{ tabActive: index == activeIndex }" v-for="(item, index) in tabArr" :key="index" @click="setActiveIndex(index)">
            {{ item }}
          </div>
        </div>
      </div>

      <div v-if="!loadingHead">
        <div class="financeList" v-if="financeAuditVos.length">
          <div class="financeItem" v-for="(item, index) in financeAuditVos" :key="index" @click="gotoFinanceMessagePage(item)">
            <view
              class="cont"
              @touchstart="touchstart"
              @touchmove="touchmove"
              @touchend="touchend"
              :id="index"
              :style="{
                right: index == cruentIndex ? right + 'px' : '0',
                transition: index == cruentIndex ? tranClass : otherTranClass,
              }"
            >
              <div class="contitle">
                <!-- 当前报表的状态 - financeStatus
                  1、已通过
                  2、审核中
                  3、驳回
                  4、草稿 -->
                <div class="tit">{{ item.financeTitle }}</div>
                <span
                  class="spanc"
                  :class="{
                    sts11: item.financeStatus == 1,
                    sts22: item.financeStatus == 2,
                    sts33: item.financeStatus == 3,
                    sts44: item.financeStatus == 4,
                  }"
                  v-if="item.financeStatus != 1"
                >
                  {{ item.financeStatusStr }}
                </span>
                <span
                  v-else
                  class="spanc"
                  :class="{
                    sts55: item.isPublic == 1,
                    sts66: item.isPublic == 0,
                  }"
                  >{{ item.isPublic == 1 ? '已公开' : '未公开' }}</span
                >
              </div>
              <div class="times">提交时间：{{ item.createTime }}</div>
            </view>
            <view class="delText" v-if="item.financeStatus != 1">
              {{ item.financeStatusStr }}
            </view>
            <view class="del" @click="setOpenIsPublic(item, index)" v-else>
              {{ item.isPublic == 1 ? '取消公开' : '公开' }}
            </view>
          </div>
        </div>
        <div class="noData" v-else>
          <img class="image1" src="@/static/image/webApp/tip1.png" alt="" />
          <img class="image2" src="@/static/image/webApp/tip2.png" alt="" />
        </div>
      </div>

      <div class="loading" v-if="loadingHead">
        <u-loading-icon textSize="18"></u-loading-icon>
      </div>
    </div>
    <!-- 时间日期窗口 -->
    <u-picker v-model="currentDate" title="选择年份" :show="datetimeShow" @confirm="timeConfirm" @cancel="datetimeShow = false" :columns="columnTime"></u-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popupShow: false,
      datetimeShow: false,
      listLoading: false,
      loadingHead: true,
      tabArr: ['全部', '公开', '未公开', '草稿箱'],
      columnTime: [],
      financeAuditVos: [],
      activeIndex: 0,
      currentDate: '',
      financeTitle: '',
      cruentIndex: '',
      startX: '',
      endX: '',
      tranClass: 'none',
      otherTranClass: 'all 0.2s ease-out 0s',
      right: '',
      rightCopy: '',
      gkWidth: 0,
      searchForm: {
        page: 0,
        limit: 200,
        financeTitle: '',
        month: this.dateFormat(new Date(), 'yyyy'),
        financeType: -1,
        isPublic: '',
      },
    }
  },
  async onLoad() {
    await this.$onLaunched
    // 计算出按钮最大滑动距离
    this.gkWidth = (window.innerWidth / 750) * 120
    this.currentDate = this.dateFormat(new Date(), 'yyyy')
    let columnData = []
    for (let i = 0; i < 10; i++) {
      columnData.push(this.currentDate - i)
    }
    this.columnTime.push(columnData)

    this.findFinanceExpenseListAndSizeByReq(true)
  },

  methods: {
    // 查询列表数据
    findFinanceExpenseListAndSizeByReq(flay) {
      if (flay) {
        this.loadingHead = true
        this.financeAuditVos = []
        this.searchForm = {
          page: 1,
          limit: 200,
          financeTitle: this.financeTitle,
          month: this.currentDate,
          financeType: -1,
          isPublic: '',
        }
        if (this.activeIndex == 0) {
          this.searchForm.financeType = -1
          this.searchForm.isPublic = ''
        } else if (this.activeIndex == 1) {
          this.searchForm.financeType = -1
          this.searchForm.isPublic = 1
        } else if (this.activeIndex == 2) {
          this.searchForm.financeType = 1
          this.searchForm.isPublic = 0
        } else if (this.activeIndex == 3) {
          this.searchForm.financeType = 4
          this.searchForm.isPublic = ''
        }
      }
      this.$https
        .post({
          url: '/axh/findFinanceExpenseListAndSizeByReq',
          data: this.searchForm,
        })
        .then((res) => {
          this.financeAuditVos = [...this.financeAuditVos, ...res.result.financeAuditVos]
          this.totalSize = res.result.currentStatusSize
          this.listLoading = false
          this.loadingHead = false
          if (res.result.financeAuditVos.length < 10) {
          }
        })
    },
    // 确定选择时间
    timeConfirm(e) {
      this.currentDate = e.value[0]
      this.findFinanceExpenseListAndSizeByReq(true)
      this.datetimeShow = !this.datetimeShow
    },
    // 是否公开
    setOpenIsPublic(item, index) {
      let params = {
        id: item.id,
        publicStatus: item.isPublic ? '0' : '1',
      }
      this.$https
        .post({
          url: '/axh/updateFinancePublicStatus',
          data: params,
        })
        .then((res) => {
          if (res.code == 200) {
            if (this.activeIndex == 0) {
              this.financeAuditVos[index].isPublic = item.isPublic == 1 ? '0' : '1'
              console.log('weqweqwe', this.financeAuditVos[index].isPublic)
            } else {
              this.financeAuditVos.splice(index, 1)
            }
            this.$u.toast('操作成功')
          }
        })
    },
    // 下拉加载数据
    // onLoadList() {
    //   if (this.searchForm.page) {
    //     this.listLoading = true
    //   }
    //   this.searchForm.page += 1
    //   this.findFinanceExpenseListAndSizeByReq()
    // },
    setActiveIndex(index) {
      this.activeIndex = index
      this.right = 0
      this.findFinanceExpenseListAndSizeByReq(true)
    },

    // 跳转详情页
    gotoFinanceMessagePage(item) {
      if (this.right) return
      uni.navigateTo({
        url: `/pageContent/finance/financeMessage?id=${item.id}&from=financialCommunity`,
      })
    },
    // 滑动操作
    touchstart(e) {
      if (this.cruentIndex != e.currentTarget.id) {
        this.right = 0
        this.rightCopy = 0
      }
      this.startX = e.touches[0].clientX //  获取其实滑动位置
      this.cruentIndex = e.currentTarget.id
    },
    touchmove(e) {
      this.tranClass = 'none'
      this.endX = e.touches[0].clientX //  获取滑动结束位置
      let cha = this.startX - this.endX + this.rightCopy // 计算滑动启示位置和结束位置的差值
      if (cha <= 0) {
        this.right = 0
      } else if (cha > this.gkWidth) {
        this.right = this.gkWidth + (cha - this.gkWidth) / (cha / 46)
      } else {
        this.right = cha
      }
    },
    touchend(e) {
      if (this.right >= this.gkWidth) {
        this.right = this.gkWidth
      } else if (this.right <= 0) {
        this.right = 0
      } else if (this.right <= 20) {
        this.right = 0
      } else if (this.right >= 21) {
        this.right = this.gkWidth
      }
      this.tranClass = 'all 0.2s ease-out 0s'
      this.rightCopy = this.right
    },
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.containerPage {
  background-color: #f9f9f9;
  min-height: 100vh;
  .content {
    width: 100%;
    .loading {
      width: 120rpx;
      margin: 0 auto;
      padding-top: 100px;
    }
    .headSea {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 24rpx 32rpx 16rpx;
      .time {
        display: flex;
        align-items: center;
        width: 110rpx;
        margin-right: 16rpx;
        font-size: 32rpx;
        img {
          width: 36rpx;
          height: 36rpx;
          transform: translate(4rpx, -2rpx);
        }
      }
      .inputSea {
        display: flex;
        align-items: center;
        width: 550rpx;
        height: 60rpx;
        background: #f3f5f7;
        border-radius: 8rpx;
        img {
          width: 30rpx;
          height: 30rpx;
          margin-left: 16rpx;
        }
        input {
          flex: 1;
          box-sizing: border-box;
          border: none;
          width: 0;
          font-size: 26rpx;
          padding: 0 16rpx;
          background: #f3f5f7;
        }
        .spanTxt {
          width: 70rpx;
          font-size: 26rpx;
          border-left: 2px solid #c3c3c3;
          padding-left: 16rpx;
          line-height: 28rpx;
        }
      }
    }
    .selBox {
      display: flex;
      align-items: center;
      padding: 0 8rpx;
      background-color: #fff;
      .screenIcon {
        display: flex;
        font-size: 24rpx;
        color: #2c83e4;
        align-items: center;
        img {
          width: 20rpx;
          height: 20rpx;
          margin-left: 2px;
        }
      }

      .selTab {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: 68rpx;
        font-size: 28rpx;
        color: #999999;
        width: 620rpx;
        padding-right: 20rpx;

        .tabItem {
          padding: 0 28rpx;
        }
        .tabActive {
          position: relative;
          color: #2c83e4;
          &::after {
            content: '';
            position: absolute;
            bottom: -6rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 32rpx;
            height: 6rpx;
            border-radius: 20rpx;
            background: #2c83e4;
          }
        }
      }
    }

    .financeList {
      width: 100%;
      .financeItem {
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 136rpx;
        background-color: #fff;
        margin-top: 16rpx;

        .cont {
          box-sizing: border-box;
          position: absolute;
          top: 0;
          // left: -1.2rpx;
          padding: 24rpx 32rpx;
          right: 0;
          width: 100%;
          height: 136rpx;
          background-color: #fff;
          .contitle {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10rpx;
            .tit {
              color: #35353f;
              font-size: 28rpx;
            }
            .spanc {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 84rpx;
              height: 36rpx;
              font-size: 22rpx;
              border-radius: 2px;
              color: #2c83e4;
              border: 1px solid #2c83e4;
            }
            .spansq {
              border: 1px solid #ed7b07;
              color: #ed7b07;
            }
          }
          .times {
            font-size: 26rpx;
            color: #999999;
          }
        }

        .del {
          box-sizing: border-box;
          display: flex;
          background: #2c83e4;
          height: 134rpx;
          width: 120rpx;
          color: #fff;
          font-size: 28rpx;
          padding: 26rpx 30rpx;
          align-items: center;
          justify-content: center;
        }
        .delText {
          box-sizing: border-box;
          display: flex;
          background: #e0e0e0;
          height: 134rpx;
          width: 120rpx;
          color: #999;
          font-size: 28rpx;
          padding: 26rpx 12rpx;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .poptitle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74rpx;
    font-size: 32rpx;
    color: #35353f;
    img {
      position: absolute;
      right: 32rpx;
      top: 22rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .popCont {
    padding: 0 32rpx;
    max-height: 70vh;
    overflow-y: auto;
    .lab {
      padding: 24rpx 0 16rpx 0;
      font-size: 28rpx;
    }
    .labList {
      display: flex;
      flex-wrap: wrap;
      .cardItem {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 204rpx;
        height: 74rpx;
        font-size: 24rpx;
        color: #585858;
        border-radius: 8rpx;
        background: #f5f5f5;
        margin: 0 37rpx 24rpx 0;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
      .activeIt {
        position: relative;
        background: #f0f5ff;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          background: url('../../static/image/webApp/选中.png') no-repeat;
          background-size: 100% 100%;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
  .popBtns {
    display: flex;
    padding: 24rpx 32rpx;
    border-top: 1px solid #d5c3c3;
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      width: 327rpx;
      height: 80rpx;
      background: #2c83e4;
      border-radius: 80rpx;
      color: #fff;
    }
    .info {
      background-color: #fff;
      color: #35353f;
      border: 1px solid #999999;
      margin-right: 32rpx;
    }
  }

  .noData {
    width: 100%;
    margin-top: 250rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .image1 {
      width: 525rpx;
      height: 404rpx;
    }
    .image2 {
      margin-top: 150rpx;
      width: 580rpx;
      height: 196rpx;
    }
  }
}

// 四种状态
// 通过
.sts11 {
  color: #3abf70 !important;
  border: 1px solid #3abf70 !important;
}

// 审核中
.sts22 {
  color: #ed7b07 !important;
  border: 1px solid #ed7b07 !important;
}

// 驳回
.sts33 {
  color: #f05e5e !important;
  border: 1px solid #f05e5e !important;
}

// 草稿
.sts44 {
  color: #999999 !important;
  border: 1px solid #999999 !important;
}
// 已公开
.sts55 {
  color: #2c83e4 !important;
  border: 1px solid #2c83e4 !important;
}
// 草稿
.sts66 {
  color: #999 !important;
  border: 1px solid #999 !important;
}
</style>
